<template>
	<el-drawer v-model="drawer" :with-header="false" @close="close" :append-to-body="true" size="500px" ref="drawerRef"
		class="customer-detail-drawer" :modal="true" modal-class="customer-modal">

		<div class="page-container">
			<div class="card-content">
				<!-- <el-row style="align-items:flex-start;">
					<el-row align="middle" class="card-scan">
						<el-image style="width: 80px; height: 80px" :src="qrCodeurl" :zoom-rate="1"
							:preview-src-list="[qrCodeurl]" fit="contain" />
						<span>扫码查看名片</span>
					</el-row>
					<div class="card-tabs">
						<el-tabs v-model="currentCard" type="card" size="small" :addable="true" @tab-add="handleAddCard"
							@tab-change="tabChange">
							<el-tab-pane v-for="item in cardList" :key="item.id" :label="item.title" :name="item.id" />
						</el-tabs>
						<div style="width:100%">
							<el-radio-group v-model="cardForm.cardType" size="default">
								<el-radio :label="1">样式一</el-radio>
								<el-radio :label="2">样式二</el-radio>
								<el-radio :label="3">样式三</el-radio>
							</el-radio-group>
						</div>
					</div>
				</el-row> -->
				<el-row style="margin-top:10px;align-items:stretch;flex-wrap:wrap;">
					<div class="card-preview-box">
						<el-scrollbar style="height:667px">
							<div class="card-header">
								<!-- 样式一 -->
								<div class="card-vertical" v-if="cardForm.cardType == 1">
									<div class="logo" v-if="cardForm.logo">
										<el-image style="height:30px" :src="cardForm.logo" fit="scale-down"></el-image>
									</div>
									<div class="user-data">
										<div class="user-message">
											<el-image style="width: 60px; height: 60px" :src="cardForm.avatar"
												:preview-src-list="[cardForm.avatar]" fit="cover" />
											<div class="user-info">
												<p class="user-name">{{ cardForm.name }}</p>
												<p class="job">{{ cardForm.positionName }}</p>
											</div>
										</div>
										<div class="chat-icon">
											<span>17聊</span>
											<communication theme="filled" size="14" fill="#ffffff" />
										</div>
									</div>
									<div class="card-code-content">
										<h4 class="company-name">{{ cardForm.companyName }}</h4>
										<div class="code-bottom" justify="space-between" align="start">
											<div class="left-data">
												<el-row class="row-cell" v-if="cardForm.showPhone == 1">
													<el-icon>
														<ele-Phone />
													</el-icon>
													<p class="data">{{ cardForm.phone }}</p>
												</el-row>
												<el-row class="row-cell">
													<el-icon style="margin-top:2px">
														<ele-Location />
													</el-icon>
													<p class="data">{{ cardForm.companyAddress }}</p>
												</el-row>
												<el-row class="row-cell" v-if="cardForm.showEmail == 1">
													<el-icon style="margin-top:1px">
														<ele-Message />
													</el-icon>
													<p class="data">{{ cardForm.email }}</p>
												</el-row>
												<el-row class="row-cell" v-for="item in cardForm.customAttr" :key="item.id"
													align="middle">
													<span style="font-size:12px">{{ item.label }}:</span>
													<p class="data">{{ item.value }}</p>
												</el-row>
											</div>
											<el-image style="width: 80px; height: 80px" :src="qrCodeurl" :zoom-rate="1"
												:preview-src-list="[qrCodeurl]" fit="contain" />
										</div>
									</div>
								</div>
								<!-- 样式二 -->
								<div class="card-style-2" v-else-if="cardForm.cardType == 2">
									<div class="left-data">
										<div class="logo">
											<el-image style="height:60px;" :src="cardForm.logo" fit="scale-down"></el-image>
										</div>
										<el-image style="width: 60px; height: 60px;margin-top:20px" :src="qrCodeurl"
											:zoom-rate="1" :preview-src-list="[qrCodeurl]" fit="contain" />
									</div>
									<div class="right-data">
										<div class="top-data">
											<div class="user-left">
												<p class="name">{{ cardForm.name }} <span class="job">{{
													cardForm.positionName }}</span></p>
												<el-row v-if="cardForm.showPhone == 1" class="phone-data">
													<el-icon color="var(--el-color-primary-light-7)"
														style="margin-right:5px">
														<ele-Phone />
													</el-icon>
													<p class="data">{{ cardForm.phone }}</p>
												</el-row>
											</div>
											<el-image style="width: 50px; height: 50px" :src="cardForm.avatar"
												:preview-src-list="[cardForm.avatar]" fit="cover" />
										</div>
										<div class="other-msg">
											<el-row justify="space-between" class="company-data">
												<h4 class="company-name">{{ cardForm.companyName }}</h4>
												<div class="chat-icon">
													<span>17聊</span>
													<communication theme="filled" size="14" fill="#ffffff" />
												</div>
											</el-row>
											<el-row class="row-cell">
												<el-icon style="margin-top:2px" color="var(--el-color-primary)">
													<ele-Location />
												</el-icon>
												<p class="data">{{ cardForm.companyAddress }}</p>
											</el-row>
											<el-row class="row-cell" v-if="cardForm.showEmail == 1">
												<el-icon style="margin-top:1px" color="var(--el-color-primary)">
													<ele-Message />
												</el-icon>
												<p class="data">{{ cardForm.email }}</p>
											</el-row>
											<el-row class="row-cell" v-for="item in cardForm.customAttr" :key="item.id"
												align="middle">
												<span style="font-size:12px">{{ item.label }}:</span>
												<p class="data">{{ item.value }}</p>
											</el-row>
										</div>
									</div>
								</div>
								<!-- 样式三 -->
								<div class="card-style-3" v-else-if="cardForm.cardType == 3">
									<div class="header-top">
										<div class="user-name">
											<el-image style="width: 40px; height: 40px;margin-right:5px"
												:src="cardForm.avatar" :preview-src-list="[cardForm.avatar]" fit="cover" />
											<div class="user-content">
												<p class="name">{{ cardForm.name }}</p>
												<p class="job">{{ cardForm.positionName }}</p>
											</div>
										</div>
										<div class="logo" v-if="cardForm.logo">
											<el-image style="height:30px" :src="cardForm.logo" fit="scale-down"></el-image>
										</div>
									</div>
									<div class="bottom-msg">
										<el-row justify="space-between" class="company-data">
											<h4 class="company-name">{{ cardForm.companyName }}</h4>
											<div class="chat-icon">
												<span>17聊</span>
												<communication theme="filled" size="14" fill="#ffffff" />
											</div>
										</el-row>
										<div class="other-msg">
											<div class="left-msg">
												<el-row class="row-cell">
													<el-icon style="margin-top:2px" color="var(--el-color-primary)">
														<ele-Location />
													</el-icon>
													<p class="data">{{ cardForm.companyAddress }}</p>
												</el-row>
												<el-row class="row-cell" v-if="cardForm.showEmail == 1">
													<el-icon style="margin-top:1px" color="var(--el-color-primary)">
														<ele-Message />
													</el-icon>
													<p class="data">{{ cardForm.email }}</p>
												</el-row>
												<el-row class="row-cell" v-for="item in cardForm.customAttr" :key="item.id"
													align="middle">
													<span style="font-size:12px">{{ item.label }}:</span>
													<p class="data">{{ item.value }}</p>
												</el-row>
											</div>
											<el-image style="width: 60px; height: 60px;" :src="qrCodeurl" :zoom-rate="1"
												:preview-src-list="[qrCodeurl]" fit="contain" />
										</div>
									</div>
								</div>
							</div>
							<el-row justify="space-between" class="center-data" style="align-items:stretch;">
								<el-col :span="20">
									<el-row class="store-msg">
										<el-col :span="12" v-if="cardForm.miniShop">
											<span class="align-tips">小程序商城：</span>
											<span class="align-data">{{ cardForm.miniShop }}</span>
										</el-col>
										<el-col :span="12" v-if="cardForm.officeAccountId">
											<span class="align-tips">微信公众号：</span>
											<span class="align-data">{{ cardForm.officeAccount }}</span>
										</el-col>
									</el-row>
									<el-row class="store-msg">
										<el-col :span="12" v-if="cardForm.yiqiShop">
											<span class="align-tips">17go.co店铺：</span>
											<span class="align-data">{{ cardForm.yiqiShop }}</span>
										</el-col>
										<el-col :span="12" v-if="cardForm.website">
											<span class="align-tips">官网地址：</span>
											<el-link class="align-data" :underline="false" style="font-size:12px"
												target="_blank" :href="cardForm.website">{{ cardForm.website }}</el-link>
										</el-col>
									</el-row>
								</el-col>
								<el-col :span="4" class="col-cell">
									<div>
										<el-icon size="26px" color="var(--el-color-primary)">
											<ele-Share />
										</el-icon>
									</div>
									<div class="col-data" v-if="cardForm.showWechat == 1">
										<wechat theme="outline" size="18" fill="#8b968d" />
										<p style="font-size:10px;color:#8b968d">加微信</p>
									</div>
								</el-col>
							</el-row>
							<el-tabs v-model="activeCard" class="card-preview-tabs" @click="tabHandlerClick">
								<el-tab-pane label="产品" name="1"></el-tab-pane>
								<el-tab-pane label="简介" name="2"></el-tab-pane>
								<el-tab-pane label="招聘" name="3"></el-tab-pane>
								<el-tab-pane label="采购" name="4"></el-tab-pane>
								<el-tab-pane label="工作圈" name="5"></el-tab-pane>
							</el-tabs>
							<template v-if="activeCard == 1">
								<div class="product-list" v-if="cardForm.productList.length > 0">
									<div class="product-cell" v-for="item in cardForm.productList" :key="item.id">
										<el-image style="width: 88px; height: 88px" :src="item.image" />
										<div class="product-data">
											<p class="product-title">{{ item.spuName }}</p>
											<div class="product-other">
												<p class="price"><span class="unit">￥</span>{{ item.price }}</p>
												<el-icon color="var(--el-color-primary)" size="18px">
													<ele-ShoppingCart />
												</el-icon>
											</div>
										</div>
									</div>
								</div>
								<el-empty v-else :image-size="100" description="暂无产品" />
							</template>
							<template v-else-if="activeCard == 2">
								<div v-if="cardForm.description" v-html="cardForm.description" class="description"></div>
								<el-empty v-else :image-size="100" description="暂无简介" />
							</template>
							<template v-else-if="activeCard == 3">
								<div class="hire-list" v-if="cardForm.hireList.length > 0">
									<div class="hire-cell" v-for="item in cardForm.hireList" :key="item.id">
										<div class="hire-top">
											<h4 class="hire-name">
												<el-tag size="small" v-for="staffType in dictMap['StaffType']"
													:type="staffType['tagClass']" :key="staffType.id"
													v-show="staffType.value == item.type">{{ staffType.name }}
												</el-tag>
												{{ item.name }}
											</h4>
											<p class="salary" v-if="item.salaryInterview == '1'">面议</p>
											<p class="salary" v-else>
												{{ formatSalary(item.salaryStart) }} - {{ formatSalary(item.salaryEnd) }}
												<span v-for="salaryType in dictMap['SalaryTimeType']" :key="salaryType.id"
													v-show="salaryType.value == item.salaryTimeType">{{ salaryType.name
													}}</span>
											</p>
										</div>
										<p class="location">{{ item.workLocation }}</p>
									</div>
								</div>
								<el-empty v-else :image-size="100" description="暂无招聘" />
							</template>
							<template v-else-if="activeCard == 4">
								<div class="product-list" v-if="cardForm.procuredList.length > 0">
									<div class="product-cell" v-for="item in cardForm.procuredList" :key="item.id">
										<el-image style="width: 88px; height: 88px" :src="item.thumb" />
										<div class="product-data">
											<p class="product-title">VALENTINO华伦天奴【新年礼物】女士ROSSO红V标志渔夫帽 ROSSO红/米色 S</p>
										</div>
									</div>
								</div>
								<el-empty v-else :image-size="100" description="暂无产品" />
							</template>
							<template v-else-if="activeCard == 5">
								<div class="timeline-list" v-if="timeline.length > 0">
									<div class="timeline-cell" v-for="(item, index) in timeline" :key="item.id">
										<el-avatar shape="square" :size="50" :src="item.avatar" />
										<div class="timeline-data">
											<p class="member-name">{{ item.memberName }}</p>
											<div class="timeline-content">
												<p class="timeline-desc" v-if="item.content">{{ item.content }}</p>
												<div class="timeline-thumbs"
													v-if="!item.video && item.images && item.images.length > 0">
													<div class="timeline-thumb-cell"
														v-for="(url, idx) in item.images.split(',')" :key="url">
														<el-image :src="url" :preview-src-list="item.images.split(',')"
															fit="cover" :z-index="9" :initial-index="idx" />
													</div>
												</div>
												<div class="video-thumbs" v-else-if="item.video"
													@click="changePlay($event, index)" :data-id="`video${index}`">
													<video :src="item.video" class="video-content" :id="`video${index}`"
														:data-id="`video${index}`"></video>
													<div class="play-icon">
														<!--  -->
														<i v-if="!item.play" class="fa fa-play-circle"
															:data-id="`video${index}`"></i>
														<i v-else class="fa fa-pause-circle" :data-id="`video${index}`"></i>
													</div>
												</div>
												<div class="other-options">
													<p class="time">{{ item.createTime }}</p>
													<p class="del" v-if="getUserInfo.id == item.userId"
														@click="delTimeLine(index)">删除</p>
												</div>
											</div>
										</div>
									</div>
								</div>
								<el-empty v-else :image-size="100" description="暂无工作圈内容" />
							</template>
						</el-scrollbar>
					</div>

				</el-row>
			</div>
		</div>







		<div class="tabs-list">
			<div class="close-btn" @click="close">
				<el-icon color="var(--next-color-white)" size="28px">
					<ele-CircleClose />
				</el-icon>
			</div>
		</div>
	</el-drawer>
</template>

<script>
import {
	toRefs,
	computed,
	reactive,
	watch,
	onMounted,
	ref,
	nextTick
} from 'vue'
import {
	ElMessage,
	ElMessageBox,
	ElInput
} from 'element-plus'
import {
	Session
} from '/@/utils/storage'
import { getDictByCodes } from '/@/api/sys/dict'
import { getMyCards, getDetail,getCardDetail } from '/@/api/sys/card'
import {pageList} from '/@/api/pms/spu'
export default {
	name: 'CardDetail',
	components: {

	},
	props: {
		dialogDrawer: {
			type: Boolean,
			default: false
		},
		defaultForm: {
			type: Object,
			default() {
				return {}
			}
		}
	},
	setup(props, context) {
		const {
			defaultForm
		} = toRefs(props)

		const uploadBanner = ref()
		const state = reactive({
			cardForm: {
				productList: [],
				hireList: []
			},
			timeline: [],
			activeCard: '1',
			dictMap: {},
			cardList: []
		})
		const defaultTime = new Date()
		let form = computed({
			get: () => defaultForm.value,
			set: val => {
				context.emit('update:defaultForm', val)
			}
		})
		const {
			dialogDrawer
		} = toRefs(props)
		let drawer = computed({
			get: () => dialogDrawer.value,
			set: (val) => {
				context.emit('update:dialogDrawer', val)
			}
		})
		watch(() => dialogDrawer.value, val => {
			context.emit("update:dialogDrawer", val)
			if (val) {
				getDicts()
				getCardInfo()
				nextTick(() => {
					if (document.querySelector('.el-drawer__body')) {
						document.querySelector('.el-drawer__body').onscroll = e => {
							state.scrollTop = e.target.scrollTop
						}
					}
					if (document.querySelector('.refLine')) {
						state.refLineTop = document.querySelector('.refLine').offsetTop
					}
				})
			}
		})
		const getSize = () => {
			if (document.body.clientWidth <= 1400) {
				return '500px'
			} else {
				return '85%'
			}
		}

		state.size = getSize()
		const close = () => {
			context.emit("update:dialogDrawer", false)
		}
		const tabHandlerClick = () => {
			console.log(state.activeCard)
		}
		const delTimeLine = (index) => {

		}

		const getDicts = async () => {
			try {
				const res = await getDictByCodes(['StaffType', 'SalaryTimeType'])
				state.dictMap = res.data
			} catch (e) {
				console.log(e)
			}
		}
		const getCardInfo = async () => {

			const res = await getCardDetail({cardUserId:form.value})
			state.cardList = res.data
			let currentCard = Object.assign({}, state.cardList[0])
			handleCardDetail(currentCard)
			state.cardForm = currentCard
			getShopList()
		}
		// 数据转换处理
		const handleCardDetail = (businessCard) => {
			businessCard.customAttr = businessCard.customAttr ? businessCard.customAttr = JSON.parse(businessCard.customAttr) : []
			if (businessCard.resRelease) {
				businessCard.resRelease = businessCard.resRelease.split(',')
				for (let i = 0; i < businessCard.resRelease.length; i++) {
					businessCard.resRelease[i] = parseInt(businessCard.resRelease[i])
				}
				// handleCheckedScopedChange(businessCard.resRelease)
			} else {
				businessCard.resRelease = []
			}
		}

		const getShopList = async () => {
            try {
                let data = {
                    current: 1,
                    size:10
                }
                const res = await pageList(data)
                state.cardForm.productList = res.data.records
            } catch (e) {
                console.log(e)
            }
        }
		// 格式化薪酬显示格式
		const formatSalary = (salary) => {
			if (salary > 10000) {
				salary = (salary / 10000) + 'w'
			} else if (salary > 1000) {
				salary = (salary / 1000) + 'k'
			}
			return salary
		}
		onMounted(() => {

		})
		return {
			drawer,
			form,
			tabHandlerClick,
			delTimeLine,
			getCardInfo,
			handleCardDetail,
			formatSalary,
			getShopList,
			...toRefs(state),
			close
		}
	}
}
</script>

<style lang="scss">
.page-container {
	margin-top: 10px;

	.card-content {
		background: var(--next-color-white);
		padding: 20px;

		.card-tabs {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			:deep(.el-tabs) {
				max-width: 100%;
			}
		}

		.card-scan {
			width: 100px;
		}

		.card-preview-box {
			width: 375px;
			height: 667px;
			margin-right: 20px;
			border-radius: 10px;
			box-shadow: rgb(0 0 0 / 5%) 0px 6px 24px 0px, rgb(0 0 0 / 8%) 0px 0px 0px 1px;
			background: var(--next-bg-main-color);
			overflow: hidden;

			:deep(.el-image) {
				display: block !important;
			}

			.card-header {
				background: var(--next-color-white);
			}

			.center-data {
				background: var(--next-color-white);
				padding: 10px 0;
				border-bottom: 1px solid var(--el-border-color);

				.col-cell {
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					cursor: pointer;

					.col-data {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
				}

				.store-msg {
					padding-left: 10px;
					height: 50%;
					font-size: 12px;
					align-items: stretch;

					.align-tips {
						color: var(--el-text-color-regular);
					}

					:deep(.el-col) {
						display: flex;
						align-items: stretch;
						word-break: break-all;
						word-wrap: break-word;
					}

					.align-data {
						flex: 1;
						overflow: hidden;
					}
				}
			}

			.card-preview-tabs {
				background: var(--next-color-white);
				display: flex;
				justify-content: center;
				position: sticky;
				top: 0;
				border-bottom: 1px solid var(--el-border-color);
				z-index: 2;

				:deep(.el-tabs__nav-wrap) {
					&::after {
						display: none;
					}
				}

				:deep(.el-tabs__header) {
					width: calc(100% - 20px);
					padding-left: 20px;
					margin-bottom: 0;
				}
			}

			.product-list {
				padding: 0 10px 10px;
				background: var(--next-color-white);

				.product-cell {
					padding: 10px 0;
					border-bottom: 1px solid var(--el-border-color);
					display: flex;
					align-items: stretch;

					&:last-child {
						border: none;
						padding-bottom: 0;
					}

					:deep(.el-image) {
						img {
							border-radius: 8px;
						}
					}

					.product-data {
						flex: 1;
						overflow: hidden;
						margin-left: 10px;
						display: flex;
						justify-content: space-between;
						flex-direction: column;

						.product-title {
							font-size: 14px;
							color: var(--el-text-color-primary);
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.product-other {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price {
								font-size: 16px;
								color: var(--el-color-error);
								font-weight: bold;

								.unit {
									font-size: 12px;
								}
							}
						}
					}
				}
			}

			.description {
				:deep(img) {
					max-width: 100% !important;
					display: block;
				}
			}

			.hire-list {
				padding: 0 10px 10px;
				background: var(--next-color-white);

				.hire-cell {
					padding: 10px 0;
					border-bottom: 1px solid var(--el-border-color);

					&:last-child {
						border: none;
						padding-bottom: 0;
					}

					.hire-top {
						display: flex;
						justify-content: space-between;
						align-items: stretch;
						color: var(--el-text-color-primary);

						.hire-name {
							display: flex;
							align-items: center;

							:deep(.el-tag) {
								margin-right: 5px;
							}
						}

						.salary {
							font-size: 15px;
							color: var(--el-color-primary);
						}
					}

					.location {
						padding: 10px 0;
						font-size: 12px;
						color: var(--el-text-color-regular);
					}
				}
			}

			.timeline-list {
				background: var(--next-color-white);
				padding: 0 10px;

				.timeline-cell {
					padding: 10px 0;
					border-bottom: 1px solid var(--el-border-color);
					display: flex;
					align-items: stretch;

					&:last-child {
						border: none;
					}

					.timeline-data {
						flex: 1;
						overflow: hidden;
						margin-left: 10px;

						.member-name {
							color: var(--el-color-primary);
							font-weight: bold;
						}

						.timeline-desc {
							font-size: 14px;
							color: var(--el-text-color-primary);
							margin-bottom: 5px;
						}

						.timeline-thumbs {
							display: flex;
							flex-wrap: wrap;
							align-items: center;

							.timeline-thumb-cell {
								width: 93px;
								height: 93px;
								margin-top: 5px;
								margin-right: 5px;

								:deep(.el-image) {
									width: 100% !important;
									height: 100% !important;
								}

								&:only-child {
									max-width: 100%;
									height: unset;
									width: unset;
									margin-bottom: 0;
								}

								&:nth-child(3n+1):nth-last-child(2),
								&:nth-child(3n+2):last-child {
									margin-right: 5px;
									margin-bottom: 0;
								}
							}
						}

						.video-thumbs {
							position: relative;
							cursor: pointer;
							width: 150px;

							video {
								object-fit: contain;
								background: #000;
								width: 150px;
								height: 250px;
								margin-top: 5px;
							}

							.play-icon {
								position: absolute;
								top: 0;
								bottom: 0;
								margin: auto;
								width: 150px;
								height: 30px;
								z-index: 10;
								border-radius: 50%;
								color: #fff;
								display: flex;
								align-items: center;
								justify-content: center;
								visibility: hidden;
								opacity: .8;

								i {
									font-size: 34px;
								}
							}

							&:hover {
								.play-icon {
									visibility: visible;
								}
							}
						}

						.other-options {
							display: flex;
							align-items: center;
							margin-top: 5px;
							font-size: 12px;

							.time {
								color: var(--el-color-info-light-3);
							}

							.del {
								color: var(--el-color-primary);
								display: flex;
								align-items: center;
								margin-left: 5px;
								cursor: pointer;
								margin-top: -1px;
							}
						}
					}
				}
			}

			// 样式一
			.card-vertical {
				position: relative;

				.logo {
					position: absolute;
					top: 5px;
					right: 5px;
				}

				.user-data {
					padding: 10px 10px 0;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.user-message {
						display: flex;
						align-items: stretch;
						flex: 1;
						overflow: hidden;

						.user-info {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							flex: 1;
							overflow: hidden;
							margin-left: 10px;

							.user-name {
								font-size: 16px;
								font-weight: bold;
								margin-top: 2px;
							}

							.job {
								font-size: 12px;
								color: var(--el-text-color-primary);
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
								max-width: 90%;
							}
						}
					}
				}

				.card-code-content {
					margin-top: 10px;
					padding: 10px;
					background: var(--el-color-primary-light-4);
					background: -webkit-linear-gradient(to right, var(--el-color-primary), var(--el-color-primary-light-2));
					background: linear-gradient(to right, var(--el-color-primary), var(--el-color-primary-light-2));

					.company-name {
						color: var(--next-color-white);
						padding-left: 20px;
					}

					.code-bottom {
						display: flex;
						justify-content: space-between;
						align-items: stretch;

						.left-data {
							flex: 1;
							overflow: hidden;
							margin-right: 10px;
							color: var(--next-color-white);

							.row-cell {
								margin-top: 5px;

								.data {
									margin-left: 5px;
									flex: 1;
									overflow: hidden;
									word-break: break-all;
									font-size: 12px;
								}
							}
						}
					}
				}
			}

			// 样式二
			.card-style-2 {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				padding: 10px 0 10px 10px;
				border-bottom: 1px solid var(--el-border-color);
				position: relative;
				overflow: hidden;

				&::before {
					content: "";
					position: absolute;
					bottom: 0;
					left: -20%;
					border-radius: 50%;
					width: 60%;
					height: 50%;
					background: var(--el-color-primary-light-9);
					transform: skewX(-55deg) skewY(18deg);
					opacity: .5;
				}

				.left-data {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: calc(30% + 10px);
					padding-right: 10px;
				}

				.right-data {
					flex: 1;
					overflow: hidden;

					.top-data {
						background: var(--el-color-primary);
						padding: 5px 5px 5px 20px;
						display: flex;
						justify-content: space-between;
						align-items: stretch;

						.user-left {
							flex: 1;
							overflow: hidden;
							display: flex;
							justify-content: flex-start;
							flex-direction: column;
						}

						.name {
							color: var(--next-color-white);
							font-size: 18px;

							.job {
								font-size: 12px;
								color: var(--el-color-primary-light-8);
							}
						}

						.phone-data {
							color: var(--next-color-white);
							margin-top: 5px;
							align-items: center;

							.data {
								font-size: 12px;
							}
						}
					}

					.other-msg {
						margin-top: 15px;

						.company-data {
							padding-right: 5px;
							align-items: flex-start;

							.company-name {
								flex: 1;
								overflow: hidden;
								word-break: break-all;
								word-wrap: break-word;
							}
						}

						.row-cell {
							margin-top: 8px;

							.data {
								margin-left: 5px;
								flex: 1;
								overflow: hidden;
								word-break: break-all;
								font-size: 12px;
								color: var(--el-text-color-regular);
							}
						}
					}
				}
			}

			// 样式三
			.card-style-3 {
				padding: 10px;
				border-bottom: 1px solid var(--el-border-color);

				.header-top {
					display: flex;
					justify-content: space-between;

					.user-name {
						flex: 1;
						overflow: hidden;
						display: flex;

						.name {
							color: var(--el-color-primary);
							font-size: 16px;
							font-weight: bold;
						}

						.job {
							margin-top: 1px;
							color: var(--el-color-primary);
							font-size: 12px;
						}
					}
				}

				.bottom-msg {
					padding-top: 20px;

					.other-msg {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						margin-top: 5px;

						.left-msg {
							flex: 1;
							overflow: hidden;

							.row-cell {
								margin-top: 8px;

								.data {
									margin-left: 5px;
									flex: 1;
									overflow: hidden;
									word-break: break-all;
									font-size: 12px;
									color: var(--el-text-color-regular);
								}
							}
						}
					}
				}
			}

			.chat-icon {
				display: flex;
				align-items: center;
				font-size: 12px;
				cursor: pointer;
				flex-direction: row-reverse;
				color: var(--next-color-white);
				background: var(--el-color-primary);
				padding: 2px 4px;
				border-radius: 4px;

				span {
					margin-left: 2px;
					color: var(--next-color-white);
				}

				:deep(.i-icon) {
					line-height: 12px;
					position: relative;
					top: 1px;
				}
			}
		}

		.card-form {
			flex: 1;
			overflow: hidden;

			.error-tips {
				color: var(--el-color-error);
				font-size: 12px;
				font-weight: bold;
			}

			.form-title {
				margin-bottom: 10px;
			}

			:deep(.el-form-item--small) {
				margin-bottom: 12px;
				align-items: flex-start;

				&:last-of-type {
					margin-bottom: 12px !important;
				}
			}

			:deep(.el-radio) {
				margin-right: 10px;
			}

			:deep(.el-form-item__content) {
				align-items: flex-start;
			}
		}

		.avatar-uploader {
			margin-top: 5px;
		}

		.avatar-uploader .avatar {
			width: 88px;
			height: 88px;
			display: block;
		}

		.cardForm-avatar {
			width: 88px;
			height: 88px;
			display: block;
		}

		.cardForm-avatar .image-slot {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			background: var(--el-fill-color-light);
			color: var(--el-text-color-secondary);
			font-size: 30px;
		}
	}

}

.customer-detail-drawer {
	overflow: unset;
	position: fixed;
}

.customer-modal {
	//left: unset;
}

.action-popper {
	background: transparent !important;
	position: relative;

	&:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--el-color-primary-light-9);
		opacity: .8;
		filter: grayscale(100%);
	}

	.el-popper__arrow::before {
		background: var(--el-color-primary-light-9) !important;
		opacity: .8;
		filter: grayscale(100%);
	}

	.sale-title {
		color: var(--el-text-color-primary);
	}
}

.tabs-list {
	position: absolute;
	top: 90px;
	left: -50px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	overflow: auto;
	max-height: 100%;

	.close-btn {
		width: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		background: var(--el-color-primary);
		padding: 5px 0;
		border-radius: 5px 0 0 5px;
	}
}

.company-title {
	text-align: center;
	font-size: 18px;
	color: var(--next-bg-menuBar-light-1);
	margin-bottom: 50px;
}

.app-container {
	// margin-top: 3px;
	background: #f9f9f9;
	min-height: calc(100vh - 95px);

	.question_header {
		background: #fff;
		padding: 20px;
		margin: 0 auto 10px;
		max-width: 1200px;
		border-radius: 16px;
		box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.answer_page {
		display: flex;
		align-items: flex-start;
		max-width: 1200px;
		margin: 0 auto;

		.title_box {
			//display: flex;
			align-items: flex-start;

			.answer_num {
				//width: 40px;
				font-weight: bold;
				font-size: 16px;
			}

			.answer_question {
				//flex: 1;
				overflow: hidden;
			}
		}

		.answer_card {
			flex: 1;
			overflow: hidden;
			margin-right: 10px;

			.answer_content_box {
				margin: 20px 0 20px 40px;
				border-bottom: 1px solid #eee;
			}
		}

		.question_card {
			width: 280px;
			position: sticky;
			top: 130px;

			.question_num_content {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.question_num {
					width: 35px;
					height: 35px;
					margin: 0 15px 12px 0;
					border-radius: 8px;
					border: 1px solid #eee;
					cursor: pointer;
					font-size: 14px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.question_num:hover {
					background: #409EFF;
					color: #fff;
					border-color: #409EFF;
				}

				.question_num:nth-child(5n+5) {
					margin-right: 0;
				}

				.success {
					background: rgba(#67C23A, .1);
					border-color: #67C23A;
					color: #67C23A;
				}

				.error {
					background: rgba(#F56C6C, .1);
					border-color: #F56C6C;
					color: #F56C6C;
				}
			}
		}

		.fixed_answer_icon {
			display: none;
		}

		@media screen and(max-width: 750px) {
			.answer_card {
				margin-right: 0;
			}

			.question_card {
				position: fixed;
				z-index: 99;
				top: unset;
				bottom: -100vh;
				width: 90%;

				.question_num_content {
					.question_num {
						margin-right: 12px;
					}

					.question_num:nth-child(5n+5) {
						margin-right: 12px;
					}
				}
			}

			.question_fixed_active {
				top: unset;
				bottom: 0;
				transition: .2s;
			}

			.fixed_answer_icon {
				display: block;
				position: fixed;
				width: 48px;
				height: 48px;
				background: #409EFF;
				z-index: 99;
				top: 40%;
				right: 0;
				border-radius: 8px 0 0 8px;
				display: flex;
				align-items: center;
				justify-content: center;

				i {
					font-size: 24px;
					color: #fff;
				}
			}
		}
	}
}

:deep(.el-image__error) {
	font-size: 12px;
}

.choice-row {
	margin: 3px 0;
	padding: 9px 15px;
	background: rgb(247, 248, 249);
}

.green-row {
	background-color: rgba(103, 194, 58, 0.5);
}

.red-row {
	background-color: rgba(245, 108, 108, 0.5);
}

// 答题卡小圆点
.dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.title_label {
	height: 40px;
	line-height: 40px;
}

.htmlPage {
    :deep(img) {
		width: 100% !important;
		height: 200px !important;
		object-fit: contain;
	}
}

.el-drawer__footer {
	height: 45px;
	padding-right: 35px;
}
</style>
